<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 移动端正常展示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
<div id="app">
  <cpn></cpn>

  <cpn>
    <!-- 获取插槽对象然后获取该插槽传递过来的数据 -->
    <template slot-scope="slot">
      <!-- <span v-for="item in slot.data">{{item}} * </span> -->
      <span>{{slot.data.join(' * ')}}</span>
    </template>
  </cpn>

  <cpn>
    <!-- 目的是获取子组件宏的pLanguages -->
    <template slot-scope="slot">
      <span v-for="item in slot.data">{{item}} - </span>
    </template>
  </cpn>
</div>

<template id="cpn">
  <div>
    <!-- :data 就是为了将数据传输出去 -->
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el : '#app',
    data : {
      message : "I don't wanna see u anymore",
    },
    components : {
      cpn : {
        template : '#cpn',
        data() {
          return {
            pLanguages : ['JavaScript', 'C++', 'Java', 'C#', "Python", "Go", "Swift"]
          }
        }
      }
    }
  });
</script>

</body>
</html>